<template>
  <div class="deploy">
    <div class="cardTop">
      <div
        :class="{ text2: true, active: mode === 'deploy' }"
        @click="mode = 'deploy'"
      >
        基础模型
      </div>
      <div class="line"></div>

      <div :class="{ text1: true, active: mode === 'drill' }" @click="toDrill">
        训练模型
      </div>
    </div>
    <el-card class="elCard">
      <div class="left">
        <ul class="leftUl">
          <li :class="changeClass">
            <div class="circle">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
            <div class="text">基本信息</div>
          </li>
          <li class="leftLi1-5">
            <div class="circle">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
            <div class="text">服务器配置</div>
          </li>
          <li class="leftLi2">
            <div class="circle">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
            <div class="text">高级配置</div>
            <div class="textBottom" @click="mouseupHandle()">
              <img :src="isCreate ? xiala2 : xiala" alt="" />
              选填
            </div>
          </li>
          <li class="leftLi3" :class="changeClass">
            <div class="circle3">
              <img src="../../assets/image/圆圈.svg" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <div
        class="elForm"
        v-loading="loading"
        element-loading-text="极速生成中..."
        :element-loading-spinner="svg"
        element-loading-svg-view-box="-10, -10, 50, 50"
        style="width: 1000px"
      >
        <el-form :model="form" :rules="rules" label-width="120px">
          <el-form-item
            label="模型名称:"
            prop="cont_name"
            style="font-weight: bold"
          >
            <el-input
              v-model="form.cont_name"
              maxlength="15"
              show-word-limit
              type="text"
            />
          </el-form-item>

          <el-form-item label="基础模型" prop="image" style="font-weight: bold">
            <el-select v-model="form.model" placeholder="请选择一个模型">
              <el-option
                v-for="(item, index) in imageList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="模型描述" style="font-weight: bold">
            <el-input
              v-model="form.describe"
              maxlength="30"
              placeholder="请输入模型描述 , 不超过30字 , 例如 : 主要应用在办公场景 , 解决相关问题"
              show-word-limit
              type="textarea"
            />
          </el-form-item>

          <div class="selectServer">
            <el-form-item
              label="选择服务器"
              prop="model"
              style="font-weight: bold"
            >
              <el-select v-model="form.server" placeholder="请选择服务器">
                <!-- 服务器 -->
                <el-popover placement="right" :width="300">
                  <template #reference>
                    <el-option value="服务器" />
                  </template>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="服务器1" />
                    </template>
                    <el-option value="服务器1-1" />
                    <el-option value="服务器1-2" />
                    <el-option value="服务器1-3" />
                  </el-popover>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="服务器2" />
                    </template>
                    <el-option value="服务器2-1" />
                    <el-option value="服务器2-2" />
                    <el-option value="服务器2-3" />
                  </el-popover>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="服务器3" />
                    </template>
                    <el-option value="服务器3-1" />
                    <el-option value="服务器3-2" />
                    <el-option value="服务器3-3" />
                  </el-popover>
                </el-popover>

                <!-- 分组服务器 -->
                <el-popover placement="right" :width="300">
                  <template #reference>
                    <el-option value="分组服务器" />
                  </template>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="分组服务器1" />
                    </template>
                    <el-option value="分组服务器1-1" />
                    <el-option value="分组服务器1-2" />
                    <el-option value="分组服务器1-3" />
                  </el-popover>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="分组服务器2" />
                    </template>
                    <el-option value="分组服务器2-1" />
                    <el-option value="分组服务器2-2" />
                    <el-option value="分组服务器2-3" />
                  </el-popover>
                  <el-popover placement="right" :width="300">
                    <template #reference>
                      <el-option value="分组服务器3" />
                    </template>
                    <el-option value="分组服务器3-1" />
                    <el-option value="分组服务器3-2" />
                    <el-option value="分组服务器3-3" />
                  </el-popover>
                </el-popover>
              </el-select>
            </el-form-item>
            <div class="shuaxin" @click="createServer">
              <img src="../../assets/image/刷新.png" alt="" srcset="" />
              <div class="text">创建服务器</div>
            </div>
          </div>

          <el-form-item class="elButton">
            <el-button type="primary" @click="onSubmit">保存/部署</el-button>
          </el-form-item>
          <!-- 高级选项 -->
          <div class="high" v-if="isHighShow">
            <el-form-item
              label="hidden_size (参数量大小)"
              style="font-weight: bold"
              label-width="200"
              prop="hidden_size"
            >
              <el-select v-model="form.hidden_size" placeholder="参数量大小">
                <el-option
                  v-for="(item, index) in modelList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="max-epoch (训练轮数)"
              style="font-weight: bold"
              label-width="200"
              prop="max_epoch"
            >
              <el-select v-model="form.max_epoch" placeholder="训练轮数">
                <el-option
                  v-for="(item, index) in modelList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-form>

        <!-- 创建服务器的弹窗 -->
        <el-dialog v-model="serverShow" class="serverShow">
          <template #header>
            <h4>服务器资源</h4>
          </template>
          <el-form
            style="margin-right: 150px; margin-left: 150px"
            label-width="90px"
          >
            <el-form-item label="IP:" style="font-weight: bold">
              <el-input placeholder="请输入IP名称" />
            </el-form-item>
          </el-form>
          <el-form
            style="margin-right: 150px; margin-left: 150px; display: flex"
            label-width="90px"
          >
            <el-form-item label="用户名:" style="font-weight: bold">
              <el-input placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码:" style="font-weight: bold">
              <el-input placeholder="请输入密码" />
            </el-form-item>
          </el-form>

          <div class="backfull">
            <el-button type="primary">自动回填</el-button>
          </div>

          <el-form
            style="margin-right: 150px; margin-left: 150px"
            label-width="100px"
            :rules="rules"
          >
            <el-form-item
              prop="server_name"
              label="服务器名称:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入服务器名称" />
            </el-form-item>
            <el-form-item
              prop="server_name"
              label="GPU型号:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入GPU型号" />
            </el-form-item>
            <el-form-item
              prop="server_name"
              label="GPU数量:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入GPU数量" />
            </el-form-item>
          </el-form>
          <el-form
            style="width: 900px; margin-left: 39px"
            label-width="210px"
            :rules="rules"
          >
            <div style="display: flex; position: relative">
              <el-form-item
                prop="server_name"
                label="服务器分组:"
                style="font-weight: bold"
              >
                <el-select v-model="form.model" placeholder="请输入服务器分组">
                  <el-option
                    v-for="(item, index) in imageList"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
              <div class="newGroup" style="margin-left: 100px">
                <el-button type="primary">新建分组</el-button>
              </div>
            </div>
          </el-form>
          <!-- 
          <h4 style="margin-right: 700px; font-weight: bold">配置</h4> -->

          <el-form
            style="width: 500px; margin-left: 100px"
            label-width="130px"
            :rules="rules"
          >
            <el-form-item
              prop="server_name"
              label="CPU:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入CPU名称" />
            </el-form-item>
            <el-form-item
              prop="server_name"
              label="内存:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入内存大小" />
            </el-form-item>
            <el-form-item
              prop="server_name"
              label="硬盘:"
              style="font-weight: bold"
            >
              <el-input placeholder="请输入硬盘大小" />
            </el-form-item>
          </el-form>
          <div
            style="border: 1px solid #ccc; width: 100%; margin-top: 60px"
          ></div>

          <div class="footer" style="margin-top: 25px; margin-left: 400px">
            <el-button @click="serverShow = false">取消</el-button>
            <el-button type="primary">确认</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElUpload,
  ElSelect,
  ElOption,
  ElMessage,
  ElLoading,
  ElCard,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElDialog,
  ElPopover
} from 'element-plus'
import { ref, reactive, computed, onUnmounted, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { beginDeploy } from '../../api/model.js'
import xiala2 from '../../assets/image/上拉.png'
import xiala from '../../assets/image/下拉.png'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const serverShow = ref(false)

const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 3px; fill: rgba(0, 0, 0, 0)"/>      `
const formRef = ref(null)
const form = ref({
  cont_name: '',
  image: '',
  model: '',
  workmode: '',
  describe: '',
  server: '',
  hidden_size: '3',
  max_epoch: '3'
})
const modelList = ref(['0', '1', '2', '3'])

const serverList = ref(['服务器', '分组服务器'])
const imageList = ref(['langport0.6', 'llama0.7'])
let chartInstance = null
const selectedOption = ref('')

const isHighShow = ref(false) // 高级配置显示
const isCreate = ref(false) // 下拉图片切换

const mode = ref('deploy')

// 点击创建服务器,跳转
const createServer = () => {
  // router.push('./createServer')
  serverShow.value = true
}

// 让下拉框可以选择下拉菜单
const handleCommand = command => {
  form.value.server = command
}

//高级配置 显示事件
const mouseupHandle = () => {
  isCreate.value = !isCreate.value
  isHighShow.value = !isHighShow.value
}

//高级配置 样式更改
const changeClass = computed(() => {
  if (isCreate.value) {
    return 'leftLi isCreateTrue'
  } else {
    return 'leftLi'
  }
})

const cancel = () => {
  router.push('./')
}

// 页头的切换
const toDrill = () => {
  router.push('./createDrill')
}

const rules = reactive({
  cont_name: [
    { required: true, message: '请输入正确的英文名字', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
      message: '英文名字格式错误 支持英文+数字',
      trigger: 'blur'
    }
  ],
  image: [
    {
      required: true,
      message: '请从下图中选择镜像地址',
      trigger: 'blur'
      // validator: validateImage
    }
  ],
  model: [{ required: true, message: '请选择正确的模型', trigger: 'blur' }],
  workmode: [
    { required: true, message: '请选择一个工作环境', trigger: 'blur' }
  ],
  drillGather: [
    { required: true, message: '请选择一个训练集', trigger: 'blur' }
  ],
  dataset_name: [
    { required: true, message: '请输入正确的英文名字', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
      message: '英文名字格式错误 支持英文+数字',
      trigger: 'blur'
    }
  ],
  server_name: [
    { required: true, message: '请输入正确的英文名字', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
      message: '英文名字格式错误 支持英文+数字',
      trigger: 'blur'
    }
  ],
  hidden_size: [
    { required: true, message: '请输入正确的参数量大小', trigger: 'blur' }
  ],
  max_epoch: [
    { required: true, message: '请输入正确的训练轮数', trigger: 'blur' }
  ]
})

const onSubmit = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    loading.value = true
    let msgData = {
      imgname: selectedOption.value,
      cont_name: form.value.cont_name,
      model_path: `/nvme1/${modelList.value}`,
      // model_path: '/nvme1/ningyu',
      model_name: 'aa',
      workmode: form.workmode === '0' ? '0' : '1',
      docker_ports: '8002',
      local_ports: '8002',
      net_name: 'test4lang',
      ctrad: '21001',
      logs_path: '/nvme1/ningyu/langport_logs'
    }
    console.log('创建新容器之前提交的数据', msgData)
    beginDeploy(msgData)
      .then(res => {
        loading.value = false

        // 处理请求成功的响应
        console.log('res', res)

        ElMessage({
          showClose: true,
          message: '创建成功 训练或部署 让数据更严谨吧~',
          type: 'success'
        })
        router.push('./drill')

        if (res.msg === 'build failed') {
          ElMessage({
            showClose: true,
            message: '模型名重复 请设置一个新的模型名',
            type: 'info'
          })
        }
      })
      .catch(error => {
        loading.value = false
        // 处理请求错误
        console.error(error)
      })

    console.log('提交了表单')
  } else {
    console.log('表单数据不完整')
  }
  // })
}
</script>

<style lang="less" scoped>
.deploy {
  padding: 30px 60px 0 60px;

  .cardTop {
    margin-bottom: 30px;
    color: #b8d5ff;
    font-size: 24px;
    opacity: 0.85;
    display: flex;

    .text1 {
      margin: 0 10px 0 10px;
    }
    .text2 {
      margin: 0 10px 0 10px;
    }
    .line {
      width: 2.5px;
      height: 24px;
      background-color: #d7d7d7;
    }
    .text1,
    .text2 {
      cursor: pointer;
    }

    .active {
      color: #267fff;
    }
  }
  .elCard {
    height: 700px;
    .left {
      width: 300px;
      .leftUl {
        img {
          width: 20px;
          height: 20px;
        }
        .text {
          margin-left: 15px;
          color: #27264d;
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0;
          opacity: 0.85;
        }

        .leftLi {
          display: flex;
          .circle {
            position: relative;
          }
          .circle::after {
            content: '';
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 2px;
            height: var(--circle-height, 440px);
            background-color: #75b7ff;
          }
        }
        .leftLi1-5 {
          display: flex;
          margin-top: 200px;
          align-items: center;
          .textBottom {
            padding-left: 10px;
            color: rgba(112, 114, 121, 0.85);
            cursor: pointer;
            img {
              width: 15px;
              height: 12px;
            }
          }
        }
        .leftLi2 {
          display: flex;
          margin-top: 200px;
          align-items: center;
          .textBottom {
            padding-left: 10px;
            color: rgba(112, 114, 121, 0.85);
            cursor: pointer;
            img {
              width: 15px;
              height: 12px;
            }
          }
        }
        .leftLi3 {
          display: flex;
          .circle3 {
            position: relative;
            top: var(--circle-top, 40px);
            opacity: var(--opacity, 0);
          }
        }
        .isCreateTrue {
          --circle-height: 560px;
          --circle-top: 90px;
          --opacity: 1;
        }
      }
    }
    .elForm {
      width: 1000px;

      .echarts {
        #myEcharts {
          width: 800px;
          height: 200px;
        }
      }

      .selectModel {
        margin-top: 20px;
      }

      .selectServer {
        display: flex;
        margin-top: 80px;

        .dropdown {
          position: absolute;
          top: 50px;
          right: -160px; /* 调整右侧下拉框的位置 */
          width: 150px; /* 调整右侧下拉框的宽度 */
          z-index: 999; /* 确保右侧下拉框在上层显示 */

          .custom-dropdown {
            width: 600px; /* 设置您希望的宽度 */
          }
        }

        .shuaxin {
          margin: 0 0 20px 30px;
          display: flex;
          align-items: center;
          padding-right: 10px;
          img {
            width: 20px;
            height: 20px;
          }
          .text {
            padding-left: 5px;
            color: #75b7ff;
          }
        }
        .shuaxin:hover {
          cursor: pointer;
        }
      }

      ::v-deep(.el-select) {
        width: 100%;
      }

      .elButton {
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: flex-start;
          margin: 90px 0 20px 0;
        }
        :deep(.el-button--primary) {
          width: 400px;
        }
      }

      // 服务器的弹窗
      .serverShow {
        .backfull {
          ::v-deep(.el-button) {
            width: 40%;
            margin-bottom: 20px;
            margin-left: 77px;
          }
        }

        .footer {
          ::v-deep(.el-button) {
            margin-left: 50px;
          }
        }
      }
    }
  }

  :deep(.el-card__body) {
    display: flex;
  }
  // :deep(.el-dialog__header) {
  //   margin-right: 700px;
  // }
}
</style>
